<template>
  <div>
    <el-dialog
      v-toggle-full
      class="base-dialog"
      :custom-class="'panna-dialog_medium'"
      :title="title"
      :append-to-body="true"
      :visible.sync="innerDialogFormVisible"
      :before-close="handleClose"
    >
      <div>
        <el-row>
          <el-col :span="5">
            <el-table
              ref="tableDataDetectionItem"
              :key="tableKey"
              :data="tableDataDetectionItem"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="cellStyle"
              border
              height="400px"
              style="width: 100%"
            >
              <el-table-column prop="detectionItemName" label="检测项目">
                <template slot-scope="scope">
                  <div @click="handleCellClick(scope.row)">
                    {{ scope.row.detectionItemName }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="1">
            <div style="opacity: 0; pointer-events: none">1</div>
          </el-col>
          <el-col :span="18">
            <el-button
              type="primary"
              style="float: left; margin-top: -20px"
              @click="choiceTemplate"
              >选择模板</el-button
            >
            <el-table
              :data="tableDataTemplate"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              border
              height="400px"
              style="width: 100%"
            >
              <el-table-column prop="templateCode" label="模板编号" />
              <el-table-column prop="templateName" label="模板名称" />
              <el-table-column label="操作" width="100px">
                <template slot-scope="scope">
                  <div class="base-table-operation">
                    <el-link type="danger" @click="deleteTemplate(scope.$index)"
                      >删除</el-link
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="base-dialog-footer">
        <el-button
          v-loading="submitLoad"
          v-rights="'GenerateRecord'"
          type="primary"
          style="width: 150px"
          @click="onSubmit"
          >生成实验记录单</el-button
        >
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
    <ExperimentTemplateRecordAddDialog
      v-if="dialogFormVisibleAdd"
      ref="ExperimentTemplateRecordAddDialog"
      :dialog-form-visible.sync="dialogFormVisibleAdd"
      :add-state.sync="addState"
      :paging-select-status="pagingSelectStatus"
      :experiment-template-data.sync="experimentTemplateData"
      @closeAddDialog="closeAddDialog"
    />
  </div>
</template>

<script>
import ExperimentTemplateRecordAddDialog from "../../../components/Eln/ExperimentTemplateRecordAddDialog.vue";
import { GetSampleRegistrationDetectionItem } from "../../../api/SampleManage/SampleRegistration";
import { deepClone } from "@/utils";
import {
  GenerateAsyncExperimentsAsync,
  GetListExperimentTemplate,
} from "../../../api/SampleManage/SampleInfoDetectionItemRecordSheet";
export default {
  name: "GenerateElnTaskDialog",
  components: {
    ExperimentTemplateRecordAddDialog,
  },
  props: {
    quoteLabelVisible: {
      type: Boolean,
      default: false,
    },
    sampleRegistrationId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      pagingSelectStatus: true,
      addState: false,
      innerDialogFormVisible: false,
      submitLoad: false,
      dialogFormVisibleAdd: false,
      title: "生成ELN检测任务",
      tabPosition: "left",
      tableDataDetectionItem: [],
      tableDataTemplate: [],
      experimentTemplateData: [],
      tableKey: 0,
      formData: {
        experimentNumber: "",
        articleNumber: "",
        // sampleCategoryName: "",
        detectionItemName: "",
        creatorTime: "",
        creatorName: [],
      },
    };
  },
  computed: {},
  created() {
    this.innerDialogFormVisible = this.quoteLabelVisible;
    // 根据样品登记查询检测项目
    GetSampleRegistrationDetectionItem({ id: this.sampleRegistrationId }).then(
      (res) => {
        this.tableDataDetectionItem = res.data;
        for (let i = 0; i < this.tableDataDetectionItem.length; i++) {
          this.tableDataDetectionItem[i].backGroundColorStatus = false;
          this.tableDataDetectionItem[i].tableDataTemplate = [];
        }
      }
    );
  },
  methods: {
    // 删除模板
    deleteTemplate(index) {
      for (let i = 0; i < this.tableDataDetectionItem.length; i++) {
        if (this.tableDataDetectionItem[i].backGroundColorStatus) {
          this.tableDataDetectionItem[i].tableDataTemplate.splice(index, 1);
          this.tableDataTemplate.splice(index, 1);
        }
      }
    },
    cellStyle({ row }) {
      var cellStyle = "text-align:center;";
      if (
        row.backGroundColorStatus !== undefined &&
        row.backGroundColorStatus !== null
      ) {
        if (row.backGroundColorStatus) {
          cellStyle += "background-color: #dfe6ec";
        }
      }
      return cellStyle;
    },
    // 选中一个检测项目
    handleCellClick(row) {
      console.log("-=-=-=-=-=-");
      console.log(row);
      for (let i = 0; i < this.tableDataDetectionItem.length; i++) {
        this.tableDataDetectionItem[i].backGroundColorStatus = false;
      }

      GetListExperimentTemplate({
        sampleInfoDetectionItemId: row.sampleInfoDetectionItemId,
        sampleInfoId: row.sampleInfoId,
      }).then((res) => {
        if (
          res.data !== undefined &&
          res.data !== null &&
          res.data.length !== 0
        ) {
          row.tableDataTemplate = res.data;
          this.tableDataTemplate = deepClone(row.tableDataTemplate);
        }
      });

      row.backGroundColorStatus = true;
      this.tableKey++;
      this.tableDataTemplate = deepClone(row.tableDataTemplate);
    },
    // 选择模板关闭
    closeAddDialog(val, pagination) {
      console.log("[][][][]");
      console.log(val);
      for (let i = 0; i < this.tableDataDetectionItem.length; i++) {
        if (this.tableDataDetectionItem[i].backGroundColorStatus) {
          this.tableDataDetectionItem[i].tableDataTemplate = deepClone(val);
          this.tableDataTemplate = deepClone(val);
        }
      }
    },
    // 选择模板
    choiceTemplate() {
      var foundObject = this.tableDataDetectionItem.find(
        (obj) => obj.backGroundColorStatus === true
      );
      if (foundObject !== undefined && foundObject !== null) {
        this.experimentTemplateData = foundObject.tableDataTemplate;

        this.dialogFormVisibleAdd = true;
      } else {
        this.$message.error("请选择检测项目");
      }
    },
    // 生成实验记录单
    onSubmit() {
      var data = [];
      var num = 0;
      for (let i = 0; i < this.tableDataDetectionItem.length; i++) {
        if (
          this.tableDataDetectionItem[i].tableDataTemplate === undefined ||
          this.tableDataDetectionItem[i].tableDataTemplate === null ||
          this.tableDataDetectionItem[i].tableDataTemplate.length === 0
        ) {
          num++;
        }
        for (
          let o = 0;
          o < this.tableDataDetectionItem[i].tableDataTemplate.length;
          o++
        ) {
          var templateData =
            this.tableDataDetectionItem[i].tableDataTemplate[o];
          data.push({
            sampleRegistrationId: this.sampleRegistrationId,
            experimentTemplateRecordTemplateId: templateData.id,
            sampleInfoDetectionItemId:
              this.tableDataDetectionItem[i].sampleInfoDetectionItemId,
            creatorId: this.$store.getters.currentUserId,
            sampleInfoId: this.tableDataDetectionItem[i].sampleInfoId,
          });
        }
      }

      if (num === this.tableDataDetectionItem.length) {
        this.$message.error("请选择模板");
        return false;
      }

      GenerateAsyncExperimentsAsync(data).then((res) => {
        this.handleClose();
      });
    },
    // 关闭弹框
    handleClose() {
      this.innerDialogFormVisible = false;
      this.$emit("update:quoteLabelVisible", false);
    },
  },
};
</script>
